<template>
  <div class="popup" v-show="iDialogVisible" v-drag>
    <div class="pop-header" style="line-height: 30px">
      <div class="title" style="float: left; margin-left: 10px">查询</div>
      <div
        class="close-icon"
        style="float: right; margin-right: 10px; cursor: pointer"
      >
        <i class="el-icon-close" @click="closeDialog" />
      </div>
    </div>
    <div class="pop-content">
      <el-table
        :data="tableData"
        :key="itemKey"
        :show-header="false"
        size="mini"
        style="width: 100%"
        max-height="300px"
        :header-cell-style="{
          'text-align': 'center',
          'background-color': '#e9f4fe',
          color: '#606266',
        }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="columnName"> </el-table-column>
        <el-table-column prop="target"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import Overlay from "ol/Overlay";
export default {
    directives: {
    drag(el) {
      const oDiv = el
      oDiv.onmousedown = function (e) {
        const disX = e.clientX - oDiv.offsetLeft
        const disY = e.clientY - oDiv.offsetTop
        document.onmousemove = function (e) {
          const l = e.clientX - disX
          const t = e.clientY - disY
          oDiv.style.left = l + 'px'
          oDiv.style.top = t + 'px'
        }
        document.onmouseup = function () {
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    },
  },
  props: {
    newCenter: Array,
    value: {
      type: Boolean,
    },
    searchResults:Array
  },
  data() {
    return {
      iDialogVisible: false,
      itemKey: "",
      tableData: [
        {
          columnName: "11",
          target: "22",
        },
      ],
      preOverlayTip:null
    };
  },
  watch: {
    value(val) {
      this.iDialogVisible = val;
    },
    searchResults: {
      handler(arr) {
        this.itemKey = Math.random();
        (this.tableData = [
          {
            columnName: "",
            target: "",
          },
        ]),
          this.handlerSearchResults(arr);
      },
      deep:true
    },
    newCenter: {
      handler(val) {
        this.createPopup(val);
      },
      deep: true,
    },
  },
  methods: {
    closeDialog(){
      this.$emit('input', false)
    },
    createPopup(p) {
      if(this.preOverlayTip){
        this.$emit("RemoveOverlayTip", this.preOverlayTip);
      }
      let overlayTip = new Overlay({
        element: this.$el,
        autoPan: true,
        autoPanAnimation: {
          duration: 250,
        },
        positioning: "bottom-center",
      });
      overlayTip.setPosition(p);
      this.$emit("overlayTip", overlayTip);
      this.preOverlayTip = overlayTip;
    },
    handlerSearchResults(arr) {
      const attributesArr = arr[0].attributes;
      for (let item in attributesArr) {
        let data = {
          columnName: item,
          target: attributesArr[item],
        };
        this.tableData.push(data);
      }
    },
  },
};
</script>
<style scoped>
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);

  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);

  width: 240px;
  height: 200px;
}
.popup::after {
  content: "";
  border-width: 6px;
  bottom: -5px;
  margin-left: -6px;
  border-color: transparent;
  border-top-color: rgba(255, 255, 255, 0.95);
  border-bottom-width: 0;
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 50%;
  border-style: solid;
}
.pop-header {
  height: 30px;
  box-shadow: 0 1px 3px rgb(0 0 0 / 30%);
  background-color: rgba(233, 239, 248, 0.9);
  cursor: move;
}
</style>